<template>
  <div class="board">
    <el-header>
      <el-input placeholder="小区名称" v-model="onceInfo.communityname" style="width: 200px"></el-input>
      <el-input placeholder="单元名称" v-model="onceInfo.unitname" style="width: 200px"></el-input>
   

      <!-- 时间查询 -->
      <!-- <div style="display: inline-block" class="block">
        <el-date-picker

          v-model="timeValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="handeChange"
        ></el-date-picker>
      </div> -->
      <el-select v-model="selectStatusList" multiple placeholder="选择状态">
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
   <!-- 查询 -->
      <el-button type="primary" @click="getOnceData">
        <i class="el-icon-search"></i>
      </el-button>
      <!-- 添加 -->
      <el-button type="success" @click="gotoAdd">
        <i class="el-icon-plus" style="margin-right: 5px"></i>录入
      </el-button>
      <el-button :data="tableData" type="primary" @click="refresh()">
        <i class="el-icon-refresh-right" style="margin-right: 5px"></i>重置
      </el-button>
    </el-header>

    <el-table @cell-click="cellHandleclick" :data="tableData" border style="width: 100%">
      <el-table-column label="小区名称">
        <template slot-scope="scope">
          <span>{{ scope.row.communityname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单元名称">
        <template slot-scope="scope">
          <span>{{ scope.row.unitname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="栋数">
        <template slot-scope="scope">
          <span>{{ scope.row.unitnum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="建设时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.unitstatus == 1">已建成</span>
          <span v-if="scope.row.unitstatus == 2">未建成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :row="scope.row"
            style="color: rgb(98, 168, 234)"
            @click="handleDetails(scope.row)"
          >详情</el-button>
          <el-button size="mini" type="danger" plain @click="handleDelete(scope.row)">归档</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      :page="sendInfo.page"
      :componentTotal="componentTotal"
      @changeRows="setRows"
      @changePage="setPage"
    ></Pagination>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      fileList: [],
      queryInfo: {
        userName: "",
        userId: "",
        userPhone: ""
      },
      statusList: [
        { value: 1, label: "已建成" },
        { value: 2, label: "未建成" }
      ],
     selectStatusList: [],
      srcList: [],
      tableData: [],
      sendInfo: {
        page: 1,
        limit: 20,
        sort: "add_time",
        order: "desc"
      },
      Token: "",
      componentTotal: 0,
      onceInfo: {
        communityname: "",
        unitname: "",
        createDt: "",
        value: "",
        currPage: 1,
        pageNum: 10
      },
      token:
        "eeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjEyLCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiJ3ZSIsImhlYWQiOiIyMDI0MDMwODE5Mzc1Nzg3MTE4OTAuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3MTE0MTQwNTgsImV4cCI6MTcxMTUwMDQ1OH0.2xNMp69GtTbiIq_-hfV7GYH0WO6gyEanoXWXefHzmqE"
    };
  },
  methods: {
      refresh(){
	   window.location.reload()
     },
    handleDetails(row) {
      this.$router.push({
        path: "/message/unitDetails",
        query: {
          id: row.id
        }
      });
    },
    // 查询按钮的方法
    async getOnceData() {
      const { data: res } = await axios.get(
        `http://community.byesame.com/house/searchList?token=${this.Token}`,
        {
          params: this.onceInfo
        }
      );
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.data.total;
      console.log(this.tableData);
    },
    async getTableData() {
      const { data: res } = await axios.get(
        "http://community.byesame.com/house/gethouseList?pageNum=10&currPage=0",
        {
          params: this.sendInfo
        }
      );
      console.log(6);
      console.log(res);
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.total;
      console.log(this.tableData);
    },
    created() {
      this.getTableData();
    },

    // 分页器
    setRows(n) {
      this.sendInfo.limit = n;
      this.getTableData();
    },
    setPage(n) {
      this.sendInfo.page = n;
      this.getTableData();
    },

    // 点击模态框的取消，模态框消失
    quit() {
      this.dialogFormVisible = false;
      this.getTableData();
    },
    async removeUser(row) {
      const { data: res } = await this.axios.get(
        `http://community.byesame.com/house/delunitList?id=${row.id}&token=${this.Token}`,
        {

        },
        {
          // headers: {
          //   "X-Litemall-Admin-Token": this.Token
          // }
        }
      );
      // if (res.errno != 0) return this.$message.error("删除角色失败");
      this.$message.success("删除角色成功");
      this.getTableData();
    },
    // 删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("是否永久删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.removeUser(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 添加接口
    async addFrom() {
      const { data: res } = await this.axios.post(
        `http://community.byesame.com/users/getUserByToken?token=${this.Token}`,
        this.queryInfo,
        {
        
        }
      );
      if (res.errno != 0) return this.$message.error("添加失败");
      this.$message.success("添加成功");
      this.dialogFormVisible = false;
      this.getTableData();
    },
    gotoAdd() {
      this.$router.push({
        path: "/message/increase"
      });
    },
    // 点击添加
    addData() {
      this.fileList = [];
      this.queryInfo = {
        desc: "",
        floorPrice: "",
        name: "",
        picUrl: ""
      };
      this.dialogFormVisible = true;
    }
  },
  mounted() {
    this.Token = Cookies.get("Admin-Token");
    this.getTableData();
  },
  components: {
    Pagination
  },
  computed: {
    headers() {
      return {
        //上传图片时，携带请求头
        "X-Litemall-Admin-Token": this.Token
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.board {
  padding: 20px;
}
.vatimg {
  width: 145px;
  height: 145px;
  display: block;
}
</style>